<template>
    <div class="app cloak" :class="isready==true?'clear_cloak':''">
        <div class="top">
            <div class="userinfo" v-if="site.avatar==null||site.nickname==null">
                <div class="avatar"><img src="/static/images/default_avatar.png" alt=""></div>
                <button class="nickname" open-type="getUserInfo" lang="zh_CN" @getuserinfo="setuserinfo">点击设置</button>
            </div>
            <div class="userinfo" v-else>
                <div class="avatar"><img :src="resurl+site.avatar" alt=""></div>
                <button class="nickname" open-type="getUserInfo" lang="zh_CN" @getuserinfo="setuserinfo">
                    {{site.nickname}}
                </button>
            </div>
        </div>
        <div class="signup_box">
            <div class="title">
                <span class="left">报名信息</span>
                <!--<a class="right">全部信息</a>-->
                <!--<img src="/static/images/qianjin.png" alt="">-->
            </div>
            <div class="btnlist">
                <a class="btn" href="/pages/signup/list/main?status=1">
                    <div class="icon"><img src="/static/images/signup_1.png" alt=""></div>
                    <div class="text">已报名</div>
                </a>
                <a class="btn" href="/pages/signup/list/main?status=0">
                    <div class="icon"><img src="/static/images/signup_0.png" alt=""></div>
                    <div class="text">等待付款</div>
                </a>
                <a class="btn" href="/pages/signup/list/main?status=2">
                    <div class="icon"><img src="/static/images/signup_2.png" alt=""></div>
                    <div class="text">已取消</div>
                </a>
            </div>
        </div>

        <div class="signup_box">
            <div class="title">
                <span class="left">我的订单</span>
                <a class="right" :href="'/pages/shop/order_list/main?status='+'all'">全部订单</a>
                <img src="/static/images/qianjin.png" alt="">
            </div>
            <div class="btnlist">
                <a class="btn" :href="'/pages/shop/order_list/main?status='+0">
                    <div class="icons"><img src="/static/images/daifukuan.png" alt=""></div>
                    <div class="text">待付款</div>
                </a>
                <a class="btn" :href="'/pages/shop/order_list/main?status='+1">
                    <div class="icons"><img src="/static/images/daifahuo.png" alt=""></div>
                    <div class="text">待发货</div>
                </a>
                <a class="btn" :href="'/pages/shop/order_list/main?status='+2">
                    <div class="icons"><img src="/static/images/yifahuo.png" alt=""></div>
                    <div class="text">待收货</div>
                </a>
                <a class="btn" :href="'/pages/shop/order_list/main?status='+3">
                    <div class="icons"><img src="/static/images/daipingjia.png" alt=""></div>
                    <div class="text">已完成</div>
                </a>
                <a class="btn" :href="'/pages/shop/order_list/main?status='+4">
                    <div class="icons"><img src="/static/images/shouhou.png" alt=""></div>
                    <div class="text">已取消</div>
                </a>
            </div>
        </div>



        <div class="mylist">
            <button class="list" open-type="feedback">
                <div class="btn">
                    <a href="" class="text" >意见反馈</a>
                </div>
                <img src="/static/images/qianjin.png" alt="">
            </button>
            <button class="list" open-type="contact">
                <div class="btn">
                    <a class="text">联系客服</a>
                </div>
                <img src="/static/images/qianjin.png" alt="">
            </button>
        </div>


    </div>
</template>

<script>
    var that = null
    export default {
        data() {
            return this.datainit({})
        },
        created() {
            that = this


        },
        mounted() {
            that.check()
        },

        methods: {
            init() {
                that.isready = true
            },
            setuserinfo(e) {
                let userinfo = e.target.userInfo
                let nickname = userinfo.nickName
                let avatar = userinfo.avatarUrl
                if (nickname == "" || nickname == null || avatar == "" || avatar == null) {
                    that.toast("设置失败");
                    return;
                }
                that.$post("api/user/set|正在设置,请稍后", {nickname: nickname, avatar: avatar}, function (data) {
                    that.check();
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .top {
        position: relative;
        width: 100%;
        height: 100px;
        background: #FF6600;

        .nickname {
            color: #FFF;
            position: absolute;
            left: 100px;
            top: 10px;
        }

        .avatar {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 80px;
            height: 80px;

            img {
                width: 100%;
                height: 100%;
            }
        }

    }
    .signup_box{
        position: relative;
        background: #FFF;
        margin-top: 10px;
        box-sizing: border-box;
        border-left: 10px solid #FFF;
        border-right: 10px solid #FFF;
        .title{
            position: relative;
            width:100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #CCC;
            .left{
                position: absolute;
                left:10px;
            }
            .right{
                position: absolute;
                right:15px;
                color: #666;
                font-size: 14px;
            }
            img{
                width:15px;
                height:15px;
                position: absolute;
                top:14px;
                right:0px;
            }
        }
        .btnlist{
            display: flex;
            padding-top: 10px;
            padding-bottom: 10px;
            .btn{
                display: block;
                flex: 1;
                .icon{
                    position: relative;
                    width: 40px;
                    height: 40px;
                    margin: auto;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .text{
                    position: relative;
                    text-align: center;
                }
            }
        }
    }
    .mylist{
        margin-top: 10px;
        .list{
            width:100%;
            height: 40px;
            background: #fff;
            position: relative;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            text-align: left;
            .btn{
                width: 100%;
                height:100%;
                .text{
                    width: 100%;
                    height:100%;
                    margin-left: 10px;
                }
            }
            img{
                width:15px;
                height:15px;
                position: absolute;
                top:14px;
                right:10px;
            }
        }
    }
    .signup_box{
        position: relative;
        background: #FFF;
        margin-top: 10px;
        box-sizing: border-box;
        border-left: 10px solid #FFF;
        border-right: 10px solid #FFF;
        .title{
            position: relative;
            width:100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #CCC;
            .left{
                position: absolute;
                left:10px;
            }
            .right{
                position: absolute;
                right:15px;
                color: #666;
                font-size: 14px;
            }
            img{
                width:15px;
                height:15px;
                position: absolute;
                top:14px;
                right:0px;
            }
        }
        .btnlist{
            display: flex;
            padding-top: 10px;
            padding-bottom: 10px;
            .btn{
                display: block;
                flex: 1;
                .icons{
                    position: relative;
                    width: 30px;
                    height: 30px;
                    margin: auto;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .text{
                    position: relative;
                    text-align: center;
                }
            }
        }
    }
</style>

